<template>
  <el-dialog
    title="添加用户"
    :visible.sync="dialogVisible"
    width="50%"
    @close="diologClose"
    :close-on-click-modal="false"
  >
    <!-- form表单 -->
    <el-form :model="dialogData" :rules="rules" ref="dialogFormRef" label-width="150px">
      <!-- 用户名 -->
      <el-form-item label="用户名" prop="username">
        <el-input v-model="dialogData.username"></el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="密码" prop="password">
        <el-input v-model="dialogData.password"></el-input>
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dialogData.email"></el-input>
      </el-form-item>

      <!-- 手机 -->
      <el-form-item label="手机" prop="phone">
        <el-input v-model="dialogData.phone"></el-input>
      </el-form-item>

      <!-- 激活状态 -->
      <el-form-item label="账号激活状态" prop="status">
        <el-cascader v-model="dialogData.status" :options="options" />
      </el-form-item>

      <!-- 选择对应的角色 -->
      <el-form-item label="选择角色" prop="roles">
        <el-cascader v-model="dialogData.roles" :options="roles" :props=" {multiple: true}"/>
      </el-form-item>
    </el-form>

    <!-- 底部 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormCheckFunc">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 请求
import { getAllRoles, postAddUserRole } from '@/network/homeRequest.js'

export default {
  data() {
    return {
      dialogVisible: false, // Dialog组件是否显示
      options: [
        { value: 0, label: '未激活' },
        { value: 1, label: '激活' }
      ],
      roles: [],
      dialogData: {
        username: 'JYBill_test01', // 用户名
        password: '123456', // 密码
        email: '17683860320@m0sina.cn', // 邮箱
        phoneNum: '13988822221', // 手机
        status: 1,
        roles: []
      },
      rules: {
        // 表单校验规则
        username: [
          // 用户名校验规则
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          // 密码规则
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ],
        email: [
          // 邮箱规则
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        phone: [
          // 自定义电话规则
          { required: true, trigger: 'blur', validator: this.validPhone }
        ],
        status: [{ required: true, message: '填写选择内容', trigger: 'change' }],
        roles: [{ required: true, message: '填写选择内容', trigger: 'change' }]
      }
    }
  },
  created() {
    this.$bus.$on('openDialog', () => {
      // 初始化打开Dialog组件事件
      // 点击按钮开启Dialog组件
      this.dialogVisible = true
      this.getRoles()
    })
  },
  destroyed() {
    this.$bus.$off('openDialog') // 注销事件
  },
  methods: {
    /**
     * dialog关闭回调函数
     */
    diologClose() {
      // Dialog组件关闭事件触发
      this.$refs['dialogFormRef'].resetFields() // 移除表单所有内容即状态
    },

    /**
     * 获取所有角色
     */
    async getRoles() {
      const { data, meta } = await getAllRoles()

      if (meta.status != 200) {
        return this.$message(meta.msg)
      }
      data.roles.forEach(el => {
        let arrObj = {
          label: el.roleDesc,
          value: el.id
        }
        this.roles.push(arrObj)
      })
    },

    /**
     * 表单提交事件
     */
    async dialogFormCheckFunc() {
      const ret = await this.$refs['dialogFormRef'].validate();
      if (!ret) { return this.$message('请将表单填写完整'); }

      // 校正参数
      const roles = [];
      this.dialogData.roles.forEach(item => roles.push({id: item[0]}));
      this.dialogData.roles = roles;
      this.dialogData.status = this.dialogData.status[0];
      
      // 请求
      const { meta } = await postAddUserRole(this.dialogData);
      if (meta.status != 200) { return this.$message.error(meta.msg); }
      this.dialogVisible = false;
      this.$bus.$emit('getUserList');
      return this.$message.success(meta.msg);
    }
  }
}
</script>
